<template>
  <div class="role-dataAuthority">
    <el-form v-loading = "loading">
      <el-form-item>
        <el-tree
          :data="menuList"
          :props="menuListTreeProps"
          node-key="id"
          ref="menuListTree"
          :default-expand-all="true"
          show-checkbox>
        </el-tree>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveDept">提交</el-button>
        <el-button @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import { treeDataTranslate } from '@/utils'
  export default {
    data () {
      return {
        loading: false,
        url: {
          treeData: '/sysDept/query/select',
          saveDept: '/sysDept/saveDeptRole',
          listDeptId: '/sysDept/selectDeptIdByRoleId'
        },
        menuList: [],
        menuListTreeProps: {
          label: 'name',
          children: 'children'
        },
        queryForm: {
          id: ''
        },
        tempKey: '-666666'
      }
    },
    activated () {
      this.queryForm.id = this.$route.params.id || 0
      this.getAllDept()
    },
    methods: {
      getAllDept () {
        this.loading = true
        this.$http({
          url: this.$http.adornUrl(this.url.treeData),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.loading = false
          this.menuList = treeDataTranslate(data)
        })
          .then(() => {
            this.$nextTick(() => {
              this.$refs.menuListTree.setCheckedKeys([])
            })
          }).then(() => {
            this.loading = true
            this.$http({
              url: this.$http.adornUrl(this.url.listDeptId),
              method: 'get',
              params: this.$http.adornParams({id: this.queryForm.id})
            }).then(({data}) => {
              this.loading = false
              let menu = data
              console.log(menu, 'before')
              let idx = menu.indexOf(this.tempKey)
              console.log(idx, 'idx')
              if (idx !== -1) {
                menu.splice(idx, menu.length - idx)
              }
              console.log(menu, 'after')
              this.$refs.menuListTree.setCheckedKeys(menu)
            })
          })
      },
      saveDept () {
        this.loading = true
        this.$http({
          url: this.url.saveDept,
          method: 'post',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
          },
          data: this.$http.adornData(

            {
              roleId: this.queryForm.id,
              id: [].concat(this.$refs.menuListTree.getCheckedKeys(), [this.tempKey], this.$refs.menuListTree.getHalfCheckedKeys()).join()

            },
            false,
            'form'
          )
        }).then(() => {
          this.loading = false
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500  // 持续时间
          })
          this.$router.push({name: 'sys-role'})
        })
      },
      goBack () {
        this.$router.push({name: 'sys-role'})
      }
    }
  }
</script>
<style scoped>
  .role-dataAuthority{
       width: 50%;
       position: absolute !important;
       top: 8% !important;
       left: 40% !important;
     }

</style>
